import React, { Component } from 'react';
import { connect } from 'react-redux';
import { hashHistory } from 'react-router';
import { Breadcrumb, Button, Form, Icon, Modal, Spin, Table } from 'antd';
import QRCode from 'qrcode.react';
import * as actions from '../../actions/list';

const FormItem = Form.Item;

@Form.create({})
@connect(
  (state, props) => ({
    config: state.config,
    lesson: state.admin,
  }), actions
)
export default class app extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.getAll();
  }

  showDeleteConfirm(id) {
    const { deleteLesson } = this.props;
    Modal.confirm({
      title: '确定删除本课程?',
      content: '删除后无法找回',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        deleteLesson(id);
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  qrCode(openId) {
    const url = `https://babygogogo.cn/english/#/open/lesson/${openId}`;
    return (
      <div style={{ marginTop: '30px' }}>
        <div style={{ wordWrap: 'break-word', marginBottom: '15px', fontSize: '14px' }}>
          课程链接：
          <a href={url}>{url}</a>
        </div>
        <QRCode value={url} size={256} />
      </div>
    );
  }

  showQRCode(name, openId) {
    Modal.info({
      title: name,
      content: this.qrCode(openId),
    });
  }

  columns() {
    return [
      {
        title: '课程名称',
        key: 'name',
        dataIndex: 'name',
      },
      {
        title: '课程类型',
        key: 'type',
        dataIndex: 'type',
        width: 120,
        render: (type) => {
          if (+type === 1) {
            return <div>试听课程</div>;
          } else if (+type === 2) {
            return <div style={{ color: '#108ee9' }}>报名课程</div>
          }
        },
      },
      {
        title: '新建/修改时间',
        key: 'create_time',
        dataIndex: 'create_time',
        width: 120,
      },
      {
        title: '操作',
        key: 'operate',
        width: 180,
        render: ({ id, name, openId }) => {
          return (
            <div>
              <Button
                type="primary"
                size="small"
                onClick={() => hashHistory.push(`/edit?id=${id}`)}
                style={{ marginRight: '10px' }}
              >
                编辑
              </Button>
              <Button
                type="default"
                size="small"
                onClick={() => this.showDeleteConfirm(id)}
                style={{ marginRight: '10px' }}
              >
                删除
              </Button>
              <Button
                type="dashed"
                size="small"
                onClick={() => this.showQRCode(name, openId)}
              >
                二维码
              </Button>
            </div>
          )
        },
      },
    ]
  }

  render() {
    const { lesson } = this.props;
    return (
      <div className="container">
        <Breadcrumb style={{ marginBottom: '15px' }}>
          <Breadcrumb.Item>
            <Icon type="home" />
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Icon type="folder-open" />
            <span>所有课程</span>
          </Breadcrumb.Item>
        </Breadcrumb>
        <Spin spinning={lesson.loading}>
          <Table
            rowKey={({ id }) => id}
            dataSource={lesson.all}
            columns={this.columns()}
            currentPage={1}
            totalCount={5}
            scroll={{ y: true }}
          />
        </Spin>
      </div>
    )
  }
}
